@extends('index.layouts.app')

@section('header')
    <link href="{{ asset('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/admin/layui/css/layui.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/master.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/gloable.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/nprogress.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/blog.css') }}" rel="stylesheet" type="text/css">
    <style>
        .layui-col-md1-1{
            width: 7.7%;
            margin: 0 0.6% 0.7% 0;
            border-radius: 5px;
            box-shadow: rgba(60, 67, 82, 0.15) 4px 4px;
            padding:4px
        }

        .layui-card-body {
            position: relative;
            padding: 0px 0px;
            line-height: 24px;
        }
        .layui-card-header {
            position: relative;
            height: 60px;
            line-height: 60px;
            padding: 0 0px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
            top: 5px;
        }
        .layui-nav {
            position: relative;
            padding: 0 20px;
            background-color: #fff;
            color: #555;
            border-radius: 2px;
            font-size: 0;
            box-sizing: border-box;
        }
    </style>
@endsection
@section('content')
    <div class="doc-container" id="doc-container">
        <div class="container-fixed" style="width:100%">
            <div class="col-content" style="width:100%">
                <div class="inner">

                    <div class="layui-fluid" id="inventory">
                        <div class="layui-row layui-col-space15">
                            @include('index.stock._herder')

                            <div class="layui-card-body layui-col-md12 ">
                                <div class="layui-col-md12">
                                    <div class="layui-card layui-col-md1 layui-col-md1-1" v-for="data_gp in data_stocks">
                                        <div v-if="data_gp['bj_price'] == 1" >名称<span style="" >@{{data_gp[1]}}</span></div>
                                        <div v-else>名称<span style="" >@{{data_gp[1]}}</span></div>
                                        <div>现价@{{data_gp[3]}}</div>
                                        <div>收、开  @{{data_gp[4]}}/@{{data_gp[5]}}</div>
                                        <div v-if="data_gp[31]>0" style="color: #FF0000">涨跌 @{{data_gp[31]}}</div> <div v-else style="color: rgb(58,168,98)">涨跌 @{{data_gp[31]}}</div>
                                        <div v-if="data_gp[32]>0" style="color: #FF0000">涨跌% @{{data_gp[32]}}</div> <div v-else style="color: rgb(58,168,98)">涨跌% @{{data_gp[32]}}</div>
                                        <div>最高  @{{data_gp[33]}}</div>
                                        <div>最低  @{{data_gp[34]}}</div>
                                        <div>换手率   @{{data_gp[38]}}</div>
                                        <div>主入  @{{data_gp['zllr']}}</div>
                                        <div>主出 @{{data_gp['zllc']}}</div>
                                        <div v-if="data_gp['zljlr']>0" style="color: #FF0000">主净入   @{{data_gp['zljlr']}}</div>
                                        <div v-else style="color: rgb(58,168,98)">主净入   @{{data_gp['zljlr']}}</div>
                                        <div>买一 买五 <br>@{{data_gp[17]}}--@{{data_gp[18]}}<br>@{{data_gp[15]}}--@{{data_gp[16]}}<br>@{{data_gp[13]}}--@{{data_gp[14]}}<br>@{{data_gp[11]}}--@{{data_gp[12]}}<br>@{{data_gp[9]}}--@{{data_gp[10]}}</div>
                                        <div>卖一 卖五<br>@{{data_gp[19]}}--@{{data_gp[20]}}<br>@{{data_gp[21]}}--@{{data_gp[22]}}<br>@{{data_gp[23]}}--@{{data_gp[24]}}<br>@{{data_gp[25]}}--@{{data_gp[26]}}<br>@{{data_gp[27]}}--@{{data_gp[28]}}</div>
                                        <hr class="layui-bg-red">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ asset('/admin/layui/layui.js') }}"></script>
    <script src="{{ asset('/js/index/gloable.js') }}"></script>
    <script src="{{ asset('/js/index/nprogress.js') }}"></script>
    <script src="{{ asset('/js/index/pagecomment.js') }}"></script>
    <script>NProgress.start();</script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
    </script>

    <script src="{{ asset('js/vue/vue.js') }}"></script>
    <script src="{{ asset('js/vue/axios.min.js') }}"></script>
    <script>
        layui.config({
            base: '../admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use([ 'index','table', 'form','admin','carousel'], function(){
            var $ = layui.$
                ,carousel = layui.carousel

        });//use
        function add(obj){
            layer.open({
                type: 2
                ,title: 'K线'
                ,content: obj
                ,maxmin: true
                ,area: ['450px', '750px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){

                }
            });
        }

    </script>

    <script>
        var app = new Vue({
            el: '#inventory',
            data() {
                return {
                    data_stocks:[],
                    message: '页面加载于 ' + new Date().toLocaleString()
                }
            },
            mounted () {
                var that = this;
                axios.get("get_stock_real_time")
                    .then(function (response) {
                        that.data_stocks = response.data.data
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });

                setInterval(function () {
                    axios.get("get_stock_real_time")
                        .then(function (response) {
                            that.data_stocks = response.data.data
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },4000);

            },
        })
    </script>
@stop
